<template>
  <view>
    <view class="bg"></view>
    <view class="wrapper">
      <!-- 车辆租期信息 -->
      <view class="carTimeWrapper">
        <!-- 车辆 -->
        <view class="carContent">
          <view class="carInfo">
            <view class="carInfo_name">{{ carInfo.modelInfo }}</view>
            <view class="carInfo_other">
              <text class="otherValue">{{ carInfo.operatingClassification || '' }}</text>
              <text class="otherValue">{{ carInfo.speedChangingBox || '' }}</text>
              <text class="otherValue">{{ carInfo.displacement || '' }}</text>
              <text class="otherValue">{{ carInfo.fuelType || '' }}</text>
            </view>
          </view>
          <image class="carImg" :src="carUrl | mmvImageUrl" mode="widthFix"></image>
        </view>

        <!-- <u-line color="#F0F2F4" margin="20rpx 0"></u-line> -->

        <!-- 租期 -->
        <view class="rentTimeContent">
          <view class="weekInfo">
            <text>{{ startTime | week }}</text>
            <text>{{ endTime | week }}</text>
          </view>
          <view class="timeInfo" style="margin-top: 8rpx">
            <text class="time">{{ showSTime }}</text>
            <text class="duration">{{ duration }}</text>
            <text class="time">{{ showETime }}</text>
          </view>
        </view>

        <!-- 取还车场站信息 -->
        <view class="addressContent">
          <!-- 取还车方式 -->
          <view>
            <view class="takeWay flex-row-center">
              <text class="title">取还方式</text>
              <text class="value">{{ rentalType | rentalType }}</text>
            </view>

            <view class="storeInfo">
              <view class="flex-row-center">
                <view class="mark1">取</view>
                <text class="title">取车地址</text>
              </view>
              <view class="addressBox flex-row-center-sb" @click.stop="goNaviRoute(1)">
                <text class="value">{{ takeAddress }}</text>
                <view class="flex-row-center">
                  <image class="navi" src="/static/common/map_navi.png" mode="aspectFill"></image>
                  <text>地图导航</text>
                </view>
              </view>
            </view>

            <view class="dashedLine">
              <u-line direction="col" dashed color="#CCD4DB" length="60rpx"></u-line>
            </view>
            <view class="storeInfo">
              <view class="flex-row-center">
                <view class="mark2">还</view>
                <text class="title">还车地址</text>
              </view>
              <view class="addressBox flex-row-center-sb" @click.stop="goNaviRoute(2)">
                <text class="value">{{ returnAddress }}</text>
                <view class="flex-row-center">
                  <image class="navi" src="/static/common/map_navi.png" mode="aspectFill"></image>
                  <text>地图导航</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 驾驶员 -->
      <view class="contentBox" v-if="false">
        <view class="subTitle">
          驾驶员
          <text class="rightInfo">*凭驾驶员本人有效证件取车</text>
        </view>
        <view class="driverContent">
          <view class="itemInfo">
            <text class="title">姓名</text>
            <u--input v-model="driverName" placeholder="请填写真实姓名" border="none" fontSize="14"
                      clearable></u--input>
          </view>
          <view class="itemInfo">
            <text class="title">身份证号</text>
            <u--input v-model="driverIdCard" placeholder="请填写身份证号" border="none" fontSize="14"
                      clearable></u--input>
          </view>
          <view class="itemInfo" style="border: none;">
            <text class="title">联系手机</text>
            <u--input v-model="driverPhone" placeholder="请填写联系手机" border="none" fontSize="14"
                      clearable></u--input>
          </view>

          <view class="pickUpInfo">
            <image class="img" src="https://qykh.shopec.com.cn/image-server/dz/pickUp_info.png" mode="aspectFill"></image>
            <view class="info">
              <text style="font-weight: bold;">身份证原件：</text>
              有效期1个月以上
            </view>
            <view class="info">
              <text style="font-weight: bold;">驾驶证原件：</text>
              有效期2个月以上、驾龄需1年以上
            </view>
            <view class="info">
              <text style="font-weight: bold;">国内信用卡：</text>
              有效期1个月以上（免押订单无需 提供）
            </view>
          </view>
        </view>
      </view>

      <!-- 押金 -->
      <view class="contentBox">
        <view class="subTitle">押金</view>
        <view class="depositContent">
          <view class="payWayWrapper">
            <block v-for="(item, index) in payWays" :key="index">
              <view @tap="payWayChange(item.depositPayType)">
                <view class="payItem flex-row-center">
                  <image
                      style="width: 40rpx; height: 40rpx;"
                      :src="
									currentDepositPayType === item.depositPayType
										? '../static/radio_selected.png'
										: '../static/radio_default.png'
								"
                      mode="aspectFill"
                  ></image>
                  <text class="payTitle">{{ item.title }}</text>
                </view>
                <view v-if="item.depositPayType === 3" class="deposit-free">
                  信用分>=550分有机会享减免押金服务
                </view>

                <view class="depositTableBox">
                  <view class="h-table" v-if="item.depositPayType === 3">
                    <view class="h-tr">
                      <view class="h-td" style="width: 200rpx;">租车押金</view>
                      <view class="h-td h-td-colspan">
                        <text style="text-decoration: line-through">¥{{ orderInfo.deposit }}</text>
                        <text style="color: #50B061; margin-left: 10rpx">免收</text>
                      </view>
                    </view>
                    <view class="h-tr">
                      <view class="h-td" style="width: 200rpx;">违章押金</view>
                      <view class="h-td h-td-colspan">
                        <text style="text-decoration: line-through">¥{{ orderInfo.illegalDeposit }}</text>
                        <text style="color: #50B061; margin-left: 10rpx">免收</text>
                      </view>
                    </view>
                    <view class="h-tr">
                      <view class="h-td" style="width: 200rpx;">免押政策</view>
                      <view class="h-td h-td-colspan">授权成功后无需支付，若无车损及违章还车后45~50天内解除授权</view>
                    </view>

                    <u-line color="#F0F2F4" margin="30rpx 0"></u-line>
                  </view>


                  <view class="h-table" v-if="item.depositPayType === 2">
                    <view class="h-tr">
                      <view class="h-td" style="width: 200rpx;">租车押金</view>
                      <view class="h-td h-td-colspan">
                        <view>
                          <view>
                            <text>¥{{ orderInfo.deposit }}</text>
                            <text style="color: #4289F2; margin-left: 10rpx">可退</text>
                          </view>
                          <view style="margin-top: 8rpx">取车时支付车辆押金,若无车损还车时退还</view>
                        </view>
                      </view>
                    </view>
                    <view class="h-tr">
                      <view class="h-td" style="width: 200rpx;">违章押金</view>
                      <view class="h-td h-td-colspan">
                        <view>
                          <view>
                            <text>¥{{ orderInfo.illegalDeposit }}</text>
                            <text style="color: #4289F2; margin-left: 10rpx">可退</text>
                          </view>
                          <view style="margin-top: 8rpx">还车时支付违章押金,若无违章还车后30-45天内退还</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

              </view>
            </block>
          </view>

        </view>
      </view>

      <!-- 租车保障 -->
      <view class="contentBox" v-if="insuranceList.length > 0">
        <view class="subTitle">租车保障</view>
        <view class="protectionContent">
          <view class="protectionItem" v-for="(item, index) in insuranceList" :key="index">
            <view class="flex-row-center-sb">
              <view class="flex-row-center">
                <text class="chargeProjectName">{{ item.chargeProjectName }}</text>
                <image
                    v-if="item.remark"
                    style="width: 30rpx;height: 30rpx;"
                    src="../static/car_helper.png"
                    mode="aspectFill"
                    @click.stop="handleHelper(item)"
                ></image>
              </view>
              <view class="flex-row-center" @click.stop="selectInsurance(item, index)">
                <text style="margin-right: 20rpx;">¥{{ item.unitPrice }}/天</text>
                <image
                    v-if="item.isOptional === 1"
                    style="width: 40rpx;height: 40rpx;"
                    :src="oldIndex === index ? '../static/radio_selected.png' : '../static/radio_default.png'"
                    mode="aspectFill"
                ></image>
                <text v-else>已含</text>
              </view>
            </view>
            <view v-if="item.remark" class="remark11">{{ item.remark }}</view>

            <u-line v-if="insuranceList.length > 1 && insuranceList.length-1!==index" color="#F0F2F4" margin="30rpx 0"></u-line>

          </view>
        </view>
      </view>

      <!-- 可选附加服务 -->
      <view class="contentBox"
            v-if="orderInfo.noMandatoryOtherCostList && orderInfo.noMandatoryOtherCostList.length > 0">
        <view class="subTitle">
          附加产品
        </view>

        <view class="protectionContent">
          <view class="protectionItem" v-for="(item, index) in orderInfo.noMandatoryOtherCostList" :key="index">
            <view class="flex-row-center-sb">
              <view class="flex-row-center">
                <text class="chargeProjectName">{{ item.chargeProjectName }}</text>
                <image
                    v-if="item.remark"
                    style="width: 30rpx;height: 30rpx;"
                    src="../static/car_helper.png"
                    mode="aspectFill"
                    @click.stop="handleHelper(item)"
                ></image>
              </view>
              <view class="flex-row-center">
                <text style="margin-right: 20rpx;">¥{{ item.unitPrice }}/{{
                    item.chargeItemsType | chargeItemsType
                  }}
                </text>
                <template v-if="item.chargeItemsType === 1 || item.chargeItemsType === 6">
                  <!-- 有上限 -->
                  <u-number-box
                      v-if="item.upperLimitOfNumber > 0"
                      v-model="item.number"
                      integer
                      :min="0"
                      :max="item.upperLimitOfNumber"
                  ></u-number-box>
                  <!-- 无上限 -->
                  <u-number-box v-else v-model="item.number" integer :min="0"></u-number-box>
                </template>

                <u-switch size="20" v-else v-model="item.selected"></u-switch>
              </view>
            </view>
            <view class="remark11" v-if="item.remark">{{ item.remark }}</view>
            <u-line v-if="orderInfo.noMandatoryOtherCostList.length > 1 && orderInfo.noMandatoryOtherCostList.length-1!==index" color="#F0F2F4" margin="30rpx 0"></u-line>
          </view>
        </view>
      </view>

      <!-- 优惠活动 -->
      <view class="contentBox" v-if="couponList.length > 0">
        <view class="subTitle">优惠活动</view>
        <view class="promotionsContent">
          <view class="promotionItem" v-if="couponList.length > 0" @tap="showCoupon = true">
            <view class="itemTitle">优惠券</view>
            <view class="itemValue">
              <view v-if="currentCoupon">
                <text>优惠券减免</text>
                <text v-if="currentCoupon.couponCategory === 2">-¥{{ discount }}</text>
                <text v-else>-¥{{ currentCoupon.preferentialMoney }}</text>
              </view>
              <view v-else style="color: #C0C0C0;">请选择优惠券</view>
              <u-icon name="arrow-right" color="#333333" size="10"></u-icon>
            </view>
          </view>
          <view class="promotionItem" v-if="orderInfo.activityDiscoount > 0">
            <view class="itemTitle">活动</view>
            <view class="itemValue">活动特惠车型-¥{{ orderInfo.activityDiscoount }}</view>
          </view>
        </view>
      </view>

      <!-- 租车必读 -->
      <view class="contentBox">
        <view class="subTitle" @click="clickAll">
          租车必读
          <text class="rightInfo">查看全部</text>
        </view>
        <!-- 取消规则 -->
        <view class="cancleRuleContent" v-if="orderInfo.ruleItemList && orderInfo.ruleItemList.length > 0">
          <view class="cancleTitle" style="margin-bottom: 20rpx;">取消规则</view>
          <view class="h-table">
            <view class="h-tr h-thead" style="background-color: #F7F9FA;">
              <view class="h-td" style="width: 300rpx;">取消时间</view>
              <view class="h-td h-td-colspan">扣费标准</view>
            </view>

            <view class="h-tr" v-for="(item, index) in orderInfo.ruleItemList" :key="item.id">
              <template v-if="item.backType === 1">
                <view class="h-td" style="width: 300rpx;">距离取车时间{{ item.ruleTime }}小时(含)以上</view>
                <view class="h-td h-td-colspan" style="background-color: #F2FCF7; color : #51C57F">免费取消</view>
              </template>
              <template v-if="item.backType === 3">
                <view class="h-td" style="width: 300rpx;">距离取车时间{{ item.ruleTime }}小时以内</view>
                <view class="h-td h-td-colspan">
                  {{ item.ruleBase === 1 ? '订单总金额' : '首日租金' }}的{{ item.ruleValue }}% 作为违约金
                </view>
              </template>
              <template v-if="item.backType === 2">
                <view class="h-td" style="width: 300rpx;">过取车时间未取车</view>
                <view class="h-td h-td-colspan">
                  收取{{ item.ruleBase === 1 ? '订单总金额' : '首日租金' }}的{{ item.ruleValue }}% 作为违约金
                </view>
              </template>
            </view>
          </view>
        </view>
      </view>

      <!-- 协议 -->
      <view class="agreementWrapper">
        <text>支付成功即代表您已阅读并同意</text>
        <text style="color: #1989FA;" @click.stop="goAgreent(6)">《用车服务协议》</text>
      </view>

      <!-- 放心之选 -->
      <orderTip></orderTip>

      <!-- 底部总金额确认 -->
      <view class="bottomWrapper">
        <view class="totalPriceContent">
          <view @tap="clickCostDetail">
            <text class="title">在线支付</text>
            <text class="price">{{ amount }}</text>
            <text class="priceDetail">明细</text>
          </view>
          <view class="confimBtn" @tap="confimOrder">去支付</view>
        </view>
      </view>

      <!-- 优惠券列表 -->
      <u-popup :show="showCoupon" @close="showCoupon = false" closeable round="16">
        <scroll-view :scroll-y="true" class="couponAlertWrapper">
          <view>
            <view class="couponTitle">
              选择优惠券
              <text style="margin-left: 20rpx; color: #1989FA;">{{ couponList.length }}张可用</text>
            </view>
            <view class="unUseCoupon" @click.stop="clickUnUseCoupon">
              <text style="font-size: 28rpx;">不使用优惠券</text>
              <image
                  style="width: 42rpx;height: 42rpx;"
                  :src="isUseCoupon ? '/pagesA/static/radio_selected.png' : '/pagesA/static/radio_default.png'"
                  mode="aspectFill"
              ></image>
            </view>
            <order-cooupon
                :index="index"
                :currentIndex="currentCouponIndex"
                :couponInfo="item"
                @selectedCoupon="selectedCoupon()"
                v-for="(item, index) in couponList"
                :key="index"
            ></order-cooupon>
          </view>
        </scroll-view>
      </u-popup>

      <!-- 费用明细 -->
      <view v-if="showCostDetail" class="costWrapper">
        <view class="costContent">
          <view class="titleBox">
            <text>费用明细</text>
            <text style="font-size: 28rpx; color: #999999;" @click.stop="showCostDetail = false">关闭</text>
          </view>
          <!-- 基础费+可选附加项 -->
          <view class="costItem" v-for="(item, index) in costDetailList" :key="index">
            <view class="flex-row-center">
              <text class="chargeProjectName">{{ item.chargeProjectName }}</text>
              <image
                  v-if="item.isRent === 1"
                  style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
                  src="../static/car_helper.png"
                  mode="aspectFill"
                  @click.stop="showPriceCalendar = !showPriceCalendar"
              ></image>
			  <image
			      v-else-if="item.remark"
			      style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
			      src="../static/car_helper.png"
			      mode="aspectFill"
			      @click.stop="handleHelper(item)"
			  ></image>
            </view>

            <view>
              <text style="color: #999;margin-right: 20rpx;font-size: 22rpx;" v-if="item.isRent !== 1">
                {{ item.calculate }}
              </text>
              <text>¥{{ item.chargeMoney }}</text>
            </view>
          </view>
          <!-- 优惠券 -->
          <view class="costItem" style="color: #FB423D;" v-if="currentCoupon">
            <text>{{ currentCoupon.couponName }}</text>
            <text v-if="currentCoupon.couponCategory === 2">-¥{{ discount }}</text>
            <text v-else>-¥{{ currentCoupon.preferentialMoney }}</text>
          </view>
        </view>
      </view>
      <!-- 租车必读 -->
      <must-read v-if="showMustRead" :showMustRead="showMustRead" :orderInfo="orderInfo"
                 @close="showMustRead = false"></must-read>
      <!-- 费用项说明 -->
      <u-modal
          :show="showProtectionHelper"
          :title="currentProtection.chargeProjectName"
          confirmText="知道了"
          @confirm="showProtectionHelper = false"
      >
        <scroll-view :scroll-y="true" style="max-height: 300rpx;">
          <view class="flex-colum-center">
            <view style="color: #666;font-size: 26rpx;">{{ currentProtection.remark }}</view>
          </view>
        </scroll-view>
      </u-modal>
      <!-- 价格日历 -->
      <u-modal :show="showPriceCalendar" title="价格日历" confirmText="知道了" @confirm="showPriceCalendar = false">
        <scroll-view :scroll-y="true" style="max-height: 500rpx;">
          <u-grid :border="false">
            <u-grid-item v-for="(item, index) in orderInfo.planPriceVoList" :key="index">
              <view class="calendarItem flex-colum-center">
                <text>{{ item.time }}</text>
                <text style="color: orange; font-size: 20rpx;">¥{{ item.price }}</text>
              </view>
            </u-grid-item>
          </u-grid>
        </scroll-view>
      </u-modal>
    </view>
  </view>
</template>

<script>
import {
  shortConfirmationOrder,
  shortPayOrder,
  memberCouponList,
  shortCancelOrder,
  luxuryConfirmationOrder,
  luxuryPayOrder
} from '@/api/order-api.js';
import {storeInfoList, planModelInfo} from '@/api/home-api.js';
import {meetRequirementMemberCoupon} from '@/api/coupon-api.js';
import orderCooupon from '@/components/home/coupon/order-coupon.vue';
import mustRead from '@/components/mustRead/mustRead.vue';
import orderTip from '@/components/layout/home-tips.vue';
import {bd09ToGcj02} from '@/utils/utils.js'
var moment = require('@/utils/moment.js');
export default {
  components: {
    orderCooupon,
    mustRead,
    orderTip
  },
  data() {
    return {
      showPriceCalendar: false,
      showProtectionHelper: false,
      currentProtection: {},
      payWays: [
        // {
        //   title: '信用免押',
        //   depositPayType: 3,
        // },
        {
          title: '到店支付车辆押金',
          depositPayType: 2
        }
      ],
      carInfo: {},
      carUrl: '',
      planId: '',
      planMealId: '',
      planDay: 0,
      orderInfo: {
        chargingItemsVoList: [],
        compensationRules: [],
        mandatoryOtherCostList: [],
        noMandatoryOtherCostList: [],
        planPriceVoList: [],
        ruleItemList: [],
        requiredInsurance: [],
        noRequiredInsurance: []
      },
      noMandatoryOtherCostList: [], //附加产品
      couponList: [],
      showAddtional: false, //是否显示附加产品
      showCoupon: false, //是否显示优惠券
      showCostDetail: false, //是否显示费用明细
      currentAddtionalList: [],
      currentDepositPayType: 2, //当前的支付类型
      currentCoupon: null, //当前选择的优惠券
      currentCouponIndex: -1, //当前优惠劵的下标
      showMustRead: false, //是否显示租车必读
      activityId: null,
      rentAmount: 0.0,
      driverName: '', //驾驶员姓名
      driverIdCard: '', //驾驶员身份证号
      driverPhone: this.$store.state.user.userInfo.contactPhone, //驾驶员手机号
      isUseCoupon: false,
      insuranceList: [], //租车保障,
      selectedInsuranceList: [], //当前选中的租车保障
      oldIndex: -1,
      clientType: 1,
    };
  },
  computed: {
    businessNo() {
      return this.$store.state.order.businessNo;
    },
    tenantId() {
      return this.$store.state.user.tenantId;
    },
    startTime() {
      return this.$store.state.order.startTime;
    },
    showSTime() {
      return moment(this.startTime).format('MM月DD日 HH:mm');
    },
    endTime() {
      return this.$store.state.order.endTime;
    },
    showETime() {
      return moment(this.endTime).format('MM月DD日 HH:mm');
    },
    takeStoreId() {
      return this.$store.state.user.takeStoreId;
    },
    returnStoreId() {
      return this.$store.state.user.returnStoreId;
    },
    takeAddress() {
      return this.$store.state.user.address;
    },
    returnAddress() {
      return this.$store.state.user.returnAddress;
    },
    rentalType() {
      return this.$store.state.order.rentalType;
    },

    duration() {
      const date1 = moment(this.startTime);
      const date2 = moment(this.endTime);
      const duration = date2.diff(date1, 'hour'); //相差的总小时数
      const days = Math.floor(duration / 24); //相差的天数
      const hours = duration % 24; //相差的小时数
      var offsetTime;
      if (hours > 0) {
        offsetTime = days + '天' + hours + '小时';
      } else {
        offsetTime = days + '天';
      }
      return offsetTime;
    },
    // 租车保障收费项
    costInsuranceList() {
      let costInsurances = [];
      let insuranceList = this.insuranceList || [];
      if (insuranceList.length > 0) {
        costInsurances = insuranceList.filter(item => {
          return item.selected === true;
        });
      }
      return costInsurances;
    },
    //附加产品
    costNoMandatoryOtherCostList() {
      let costNoMandatoryOtherCostList = [];
      let noMandatoryOtherCostList = this.orderInfo.noMandatoryOtherCostList || [];
      if (noMandatoryOtherCostList.length > 0) {
        costNoMandatoryOtherCostList = noMandatoryOtherCostList.filter(item => {
          if (item.chargeItemsType === 2) {
            //按天->开关
            if (item.selected) {
              //开关开启
              return item;
            }
          } else {
            //按次|按个->步进器
            if (item.number > 0) {
              //当次数|个数大于0时
              const itemCost = item.number * item.unitPrice; //计算出来的金额
              if (item.upperLimitOfAmount !== -1) {//金额有上限
                if (itemCost > item.upperLimitOfAmount) {
                  //当金额大于最大限制金额->取最大金额
                  item.chargeMoney = item.upperLimitOfAmount;
                  item.calculate = item.unitPrice + '×️' + item.number;
                  return item;
                } else {
                  //当在最大金额范围内
                  item.chargeMoney = item.number * item.unitPrice;
                  item.calculate = item.unitPrice + '×' + item.number;
                  return item;
                }
              } else {//金额无上限
                item.chargeMoney = item.number * item.unitPrice;
                item.calculate = item.unitPrice + '×' + item.number;
                return item;
              }

            }
          }
        });
      }
      return costNoMandatoryOtherCostList;
    },
    // 所有的收费项列表
    costDetailList() {
      let costs = [...this.orderInfo.chargingItemsVoList, ...this.costInsuranceList, ...this.costNoMandatoryOtherCostList];
      return costs;
    },

    //总金额
    amount: {
      get() {
        var tatalAmount = 0;
        //其他费用
        for (let costItem of this.costDetailList) {
          tatalAmount += Number(costItem.chargeMoney);
        }

        if (this.currentDepositPayType === 1) {
          //线上支付 = 押金+其他费用总计
          tatalAmount = tatalAmount + this.orderInfo.deposit + this.orderInfo.illegalDeposit;
        } else if (this.currentDepositPayType === 2) {
          //线下支付 = 其他费用总计
        } else {
          //微信支付分
        }

        if (!this.$u.test.isEmpty(this.currentCoupon)) {
          //如果存在优惠券
          if (this.currentCoupon.couponCategory === 2) {
            //折扣劵
            //优惠券金额
            let couponAmount = this.discount;
            tatalAmount = tatalAmount - couponAmount;
          } else {
            //立减|满减
            //优惠券金额
            let couponAmount = this.currentCoupon.preferentialMoney;
            tatalAmount = tatalAmount - couponAmount;
          }
        }

        return tatalAmount.toFixed(2);
      }
    },

    discount() {
      if (this.currentCoupon) {
        let couponAmount = this.orderInfo.rent * ((10 - this.currentCoupon.discount) / 10);
        let resultAmount = parseFloat(couponAmount).toFixed(2);
        return resultAmount;
      }
      return 0;
    },

  },
  onLoad(op) {
    // #ifdef MP-ALIPAY
    this.clientType = 2;
    // #endif
    this.planId = op.planId;
    this.carUrl = op.carUrl;
    this.activityId = op.activityId;
    this.rentAmount = op.rentAmount;
    if (op.planMealId) {
      //有套餐
      this.planMealId = op.planMealId;
      this.planDay = op.planDay;
    }
    this.getCarInfo();
    this.getStoreInfo();
  },

  methods: {
	  showRemark(item){
		this.showProtectionHelper = !this.showProtectionHelper;  
	  },
    // 租车保障可选项选择
    selectInsurance(item, index) {
      //可选的
      if (item.isOptional === 1) {
        if (this.oldIndex === -1) {
          //未选择
          this.oldIndex = index;
          item.selected = true;
        } else {
          //已选择
          if (this.oldIndex === index) {
            //选择了相同项
            item.selected = false;
            this.oldIndex = -1;
          } else {
            //选择了不同项
            this.oldIndex = index;
            this.insuranceList = this.insuranceList.map((item, index) => {
              if (this.oldIndex === index) {
                item.selected = true;
              } else if (item.isOptional === 1) {
                item.selected = false;
              }

              return item;
            });
          }
        }
      }
    },
    //获取车型信息
    getCarInfo() {
      uni.showLoading({
        title: '加载中...'
      });
      planModelInfo({
        tenantId: this.tenantId,
        planId: this.planId,
        bizType: this.businessNo
      }).then(res => {
        this.carInfo = res.data;
      });
    },

    //获取门店信息
    getStoreInfo() {
      if (this.rentalType === 1 || this.rentalType === 5) {
        //如果取车地址不是门店获取最近门店
        //获取取车门店信息
        storeInfoList({
          tenantId: this.tenantId,
          lat: this.$store.state.user.takeCarLat,
          lon: this.$store.state.user.takeCarLng,
          bizType: this.businessNo
        }).then(res => {
          this.$store.commit('user/saveTakeStoreId', res.data.storeId);
          if (this.$store.state.order.rentalType === 1) {
            this.$store.commit('user/saveAddress', res.data.storeName);
            this.$store.commit('user/saveTakeCarLat', res.data.lat);
            this.$store.commit('user/saveTakeCarLng', res.data.lon);
          }
        });
      }

      if (this.$store.state.user.returnStoreId.length === 0) {
        //如果还车地址不是门店获取最近门店
        //获取还车门店信息
        storeInfoList({
          tenantId: this.tenantId,
          lat: this.$store.state.user.returnCarLat,
          lon: this.$store.state.user.returnCarLng,
          bizType: this.businessNo
        }).then(res => {
          this.$store.commit('user/saveReturnStoreId', res.data.storeId);
          if (this.$store.state.order.rentalType === 1) {
            this.$store.commit('user/saveReturnAddress', res.data.storeName);
            this.$store.commit('user/saveReturnCarLat', res.data.lat);
            this.$store.commit('user/saveReturnCarLng', res.data.lon);
          }
        });
      }

      //获取订单确认信息
      setTimeout(() => {
        this.getOrderInfo();
      }, 1000);
    },
    //订单确认接口
    getOrderInfo() {
      var params = {
        tenantId: this.tenantId,
        planId: this.planId,
        startTime: this.startTime,
        endTime: this.endTime,
        planMealId: this.planMealId,
        differentStoresCar: this.$store.state.order.differentStoresCar,
        takeStoreId: this.takeStoreId,
        alsoStoreId: this.returnStoreId,
        rentalType: this.$store.state.order.rentalType,
        takeLat: this.$store.state.user.takeCarLat,
        takeLon: this.$store.state.user.takeCarLng,
        alsoLat: this.$store.state.user.returnCarLat,
        alsoLon: this.$store.state.user.returnCarLng,
        rentAmount: this.rentAmount
      };

      shortConfirmationOrder(params).then(res => {
        uni.hideLoading();
        this.orderInfo = res.data;
        if (this.orderInfo.noMandatoryOtherCostList != null && this.orderInfo.noMandatoryOtherCostList.length > 0) {
          this.noMandatoryOtherCostList = this.orderInfo.noMandatoryOtherCostList.map(item => {
            this.$set(item, 'selected', false);
            return item;
          });
        }

        // 必选的租车保障
        if (this.orderInfo.requiredInsurance != null && this.orderInfo.requiredInsurance.length > 0) {
          this.insuranceList = this.orderInfo.requiredInsurance;
        }
        // 可选的租车保障
        if (this.orderInfo.noRequiredInsurance != null && this.orderInfo.noRequiredInsurance.length > 0) {
          this.insuranceList = [...this.insuranceList, ...this.orderInfo.noRequiredInsurance];
        }
        // 自定义选中
        if (this.insuranceList.length > 0) {
          this.insuranceList = this.insuranceList.map(item => {

            let isSelected = item.isOptional == 2 ? true : false;
            // this.$set(item, 'selected', isSelected);
            item.selected = isSelected;
            return item;
          });
        }
        console.log('保险项', this.insuranceList);
        this.getCoupon();
      });
    },
    // 获取下单优惠券
    getCoupon() {
      meetRequirementMemberCoupon({
        tenantId: this.tenantId,
        storeId: this.takeStoreId,
        planId: this.planId,
        amount: this.orderInfo.rent,
        bizClassification: this.businessNo,
        pageNo: 1,
        pageSize: 99
      }).then(res => {
        this.couponList = res.data || [];
      });
    },

    // 导航
    goNaviRoute(type) {
		
      let lat;
      let lng;
      let name;
      if (type === 1) {
		    let result = bd09ToGcj02(this.$store.state.user.takeCarLat, this.$store.state.user.takeCarLng)
			lat = result[0];
			lng = result[1];
        // lat = this.$store.state.user.takeCarLat;
        // lng = this.$store.state.user.takeCarLng;
        name = this.$store.state.user.address;
      } else {
		  let result = bd09ToGcj02(this.$store.state.user.returnCarLat, this.$store.state.user.returnCarLng)
		  lat = result[0];
		  lng = result[1];
        // lat = this.$store.state.user.returnCarLat;
        // lng = this.$store.state.user.returnCarLng;
        name = this.$store.state.user.returnAddress;
      }

      uni.openLocation({
        //​使用微信内置地图查看位置。
        latitude: lat, //要去的纬度-地址
        longitude: lng, //要去的经度-地址
        name: name,
        address: name,
        success() {
          console.log('成功了');
        },
        fail(msg) {
          console.log(msg);
        }
      });
    },
    // 查看保障明细
    handleHelper(item) {
      this.currentProtection = item;
      this.showProtectionHelper = true;
    },
    //点击了不使用优惠券
    clickUnUseCoupon() {
      this.currentCoupon = null;
      this.currentCouponIndex = -1;
      this.isUseCoupon = true;
      this.showCoupon = false;
    },
    //当前选择的优惠券选择
    selectedCoupon(couponInfo, index) {
      this.currentCouponIndex = index;
      if (couponInfo.couponCategory === 1) {
        //满减劵
        if (this.orderInfo.rent >= couponInfo.conditionMoney) {
          //如果租金大于优惠券满减金额时
          this.currentCoupon = couponInfo;
          this.showCoupon = false;
        } else {
          this.$u.toast('当前优惠券不可用,请选择其他优惠券');
        }
      } else {
        this.currentCoupon = couponInfo;
        this.showCoupon = false;
      }

      this.isUseCoupon = false;
    },

    //改变附加产品的状态
    addtionalChange(item) {
      item.selected = !item.selected;
      this.$forceUpdate();
    },
    //改变支付状态
    payWayChange(type) {
      if (type === 3) {
        this.$u.toast('正在申请接入,敬请期待');
      } else {
        this.currentDepositPayType = type;
      }
    },
    //确定选择可选项
    confimAddtional() {
      var currentAddtionalList = [];
      for (let addtionalItem of this.noMandatoryOtherCostList) {
        if (addtionalItem.selected === true) {
          currentAddtionalList.push(addtionalItem);
        }
      }
      this.currentAddtionalList = currentAddtionalList;
      this.showAddtional = false;
    },

    //费用明细
    clickCostDetail() {
      this.showCostDetail = !this.showCostDetail;
    },
    clickAll() {
      this.showMustRead = !this.showMustRead;
    },
    //确认订单
    confimOrder() {
      var couponId;
      if (!this.$u.test.isEmpty(this.currentCoupon)) {
        couponId = this.currentCoupon.memberCouponId;
      }

      if (this.currentDepositPayType === -1) {
        uni.$u.toast('请选择押金支付方式');
        return
      }

      let params = {
        tenantId: this.tenantId,
        planId: this.planId,
        startTime: this.startTime,
        endTime: this.endTime,
        rentalType: this.$store.state.order.rentalType,
        differentStoresCar: this.$store.state.order.differentStoresCar,
        takeStoreId: this.takeStoreId,
        alsoStoreId: this.returnStoreId,
        amount: this.amount,
        deposit: this.orderInfo.deposit,
        rent: this.orderInfo.rent,
        couponId: couponId,
        illegalDeposit: this.orderInfo.illegalDeposit,
        depositPayType: this.currentDepositPayType,
        depositPayWay: this.currentDepositPayType === 1 ? 1 : null,
        rentPayType: 1,
        rentPayWay: 1,
        takeAddress: this.takeAddress,
        takeLon: this.$store.state.user.takeCarLng,
        takeLat: this.$store.state.user.takeCarLat,
        alsoAddress: this.returnAddress,
        alsoLon: this.$store.state.user.returnCarLng,
        alsoLat: this.$store.state.user.returnCarLat,
        costList: this.costDetailList,
        activityId: this.activityId,
        driverName: this.driverName,
        driverIdCard: this.driverIdCard,
        planPriceVoList: this.orderInfo.planPriceVoList,
        clientType: this.clientType
      };
      uni.showLoading();
      shortPayOrder(params).then(res => {
        uni.hideLoading();
        let data = JSON.parse(res.data.json);
        let amount = res.data.amount;
        let orderNo = res.data.orderNo;
        // #ifdef MP-WEIXIN
        //唤起微信支付
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success: function (wxRes) {
            uni.redirectTo({
              url: '/pagesB/activity/activity-paySuccess?orderNo=' + orderNo + '&totalPrice=' + amount + '&backViewType=1'
            });
          },
          fail: function (err) {
            uni.showToast({
              title: '订单支付失败,请前往订单详情支付',
              icon: 'none'
            });
            uni.navigateBack({
              delta: 10
            });
          }
        });
        // #endif

        // #ifdef MP-ALIPAY
        uni.requestPayment({
          provider: 'alipay',
          orderInfo: res.data.json,
          success: function (aliRes) {
            console.log('success:' + JSON.stringify(aliRes));
            if (aliRes.resultCode == 9000) {
              uni.redirectTo({
                url: '/pagesB/activity/activity-paySuccess?orderNo=' + orderNo + '&totalPrice=' + amount + '&backViewType=1'
              });
            } else {
              uni.showToast({
                title: '订单支付失败,请前往订单详情支付',
                icon: 'none'
              });
              uni.navigateBack({
                delta: 2
              });
            }
          },
          fail: function (err) {
            console.log('fail:' + JSON.stringify(err));
            uni.showToast({
              title: '订单支付失败,请前往订单详情支付',
              icon: 'none'
            });
            uni.navigateBack({
              delta: 2
            });
          }
        })

        // #endif


      }).catch((res) => {
		  console.log('进来了')
		  console.log(res)
		 
        uni.hideLoading();
		setTimeout(()=>{
			uni.showToast({
				title: res,
				icon: 'none'
			});
		},100)
      })
    },

    goAgreent(type) {
      uni.navigateTo({
        url: '../../pages/guide/guide?type=' + type
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/style/helang-table.scss';

.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 831rpx;
  background: linear-gradient(0deg, #f2f3f5 0%, #3b86f9 100%);
  // z-index: -1;
}

.wrapper {
  position: relative;
  margin: 20rpx;
  padding-bottom: 160rpx;
}

.carTimeWrapper {
  background-color: $bg-white-color;
  border-radius: 16upx;
  padding: 30upx;

  .carContent {
    display: flex;
    align-items: center;

    .carInfo {
      margin-right: 20rpx;

      &_name {
        font-size: 34rpx;
        font-weight: bold;
        width: 320rpx;
        color: $text-color-33;
      }

      &_other {
        margin-top: 25rpx;
        max-width: 520rpx;

        .otherValue {
          color: $text-color-33;
          margin-right: 26rpx;
          font-size: 22rpx;
        }
      }
    }

    .carImg {
      width: 305rpx;
      height: 153rpx;
    }
  }

  .rentTimeContent {
    margin-top: 20upx;
    padding: 20rpx 0;
    border-top: 1rpx solid #fafafa;
    border-bottom: 1rpx solid #fafafa;

    .weekInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26rpx;
      color: #898989;
    }

    .timeInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .time {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
      }

      .duration {
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        padding: 0 40rpx;
        background: #F3F8FE;
        border-radius: 18rpx;
        font-size: 22rpx;
        color: #1989FA;
      }
    }
  }

  .addressContent {
    margin-top: 20rpx;
    position: relative;

    .takeWay {
      .title {
        font-size: 28rpx;
        color: #666666;
      }

      .value {
        margin-left: 32rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
      }
    }

    .dashedLine {
      position: absolute;
      top: 100rpx;
      left: 20rpx;
    }

    .storeInfo {
      margin-top: 20rpx;
      color: #333;
      font-size: 22rpx;

      .mark1 {
        box-sizing: border-box;
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
        background-color: #F0F8FF;
        color: #1989FA;
        border-radius: 22rpx;
        border: 1rpx solid #1989FA;
      }

      .mark2 {
        box-sizing: border-box;
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
        background-color: #FFF6EF;
        color: #FF892C;
        border-radius: 22rpx;
        border: 1rpx solid #FF892C;
      }

      .title {
        margin-left: 16rpx;
        font-size: 26rpx;
        color: #333333;
      }

      .addressBox {
        margin-top: 6rpx;
        color: #3B86F6;
        font-size: 22rpx;

        .value {
          font-size: 26rpx;
          // font-weight: 500;
          color: #666666;
          max-width: 400rpx;
          margin-left: 60rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .line {
          display: inline-block;
          width: 1rpx;
          height: 40rpx;
          background-color: #fafafa;
        }

        .navi {
          margin-right: 8rpx;
          width: 32rpx;
          height: 32rpx;

        }
      }
    }
  }
}

// 公共盒子样式
.contentBox {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: $bg-white-color;
  border-radius: 16rpx;

  .subTitle {
    color: $text-color-33;
    font-size: 34rpx;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .rightInfo {
      color: #1989fa;
      font-size: 24rpx;
      position: absolute;
      right: 30rpx;
    }
  }
}

//驾驶员
.driverContent {
  .itemInfo {
    display: flex;
    align-items: center;
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    border-bottom: 1px solid #fafafa;

    .title {
      width: 120rpx;
      font-size: 28rpx;
      color: #6f7375;
      margin-right: 30rpx;
      text-align: left;
    }
  }

  .pickUpInfo {
    margin-top: 20rpx;
    background: #f1f8ff;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: #333;
    padding: 60rpx 24rpx 35rpx;
    position: relative;

    .img {
      position: absolute;
      left: 0;
      top: -10rpx;
      width: 178rpx;
      height: 52rpx;
    }

    .info {
      margin-top: 15rpx;
    }
  }
}

// 押金
.depositContent {
  margin-top: 32rpx;
  .payWayWrapper {
    .payItem {
      margin: 20rpx 0 0;
      .payTitle {
        margin-left: 16rpx;
        font-size: 28rpx;
        color: $text-color-33;
      }
    }

    .deposit-free {
      margin-top: 16rpx;
      color: #61676B;
      font-size: 24rpx;
    }

    .depositTableBox {
      margin: 24rpx 0;
      color: #333333;
      font-size: 24rpx;
    }

  }

  .tableBox {
    margin-top: 30rpx;
    height: 360rpx;
    border: 1rpx solid #adb8bf22;

    .tr {
      display: flex;
      height: 179rpx;
      border-bottom: 1rpx solid #adb8bf22;

      .leftBox {
        width: 40%;
        color: #333;
        height: 179rpx;
        line-height: 179rpx;
        text-align: center;
        font-size: 26rpx;
        background-color: #eef2f6;
        border-right: 1rpx solid #adb8bf22;
      }

      .rightBox {
        width: 60%;
        padding: 40rpx;
        color: #333;
        font-size: 24rpx;
      }
    }
  }
}

// 可选附加项
.additionalContent {
  padding-top: 10rpx;

  .additionalItem {
    height: 44upx;
    display: flex;
    justify-content: space-between;
    padding: 20upx 20upx 0;

    .title {
      font-size: 26upx;
      font-weight: bold;
      color: $text-color-33;
    }

    .value {
      font-size: 26upx;
      color: $text-color-33;
    }
  }
}

// 优惠活动
.promotionsContent {
  padding-top: 10rpx;

  .promotionItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    border-bottom: 1px solid #fafafa;

    .itemTitle {
      font-size: 28rpx;
      color: #6f7375;
    }

    .itemValue {
      display: inline-flex;
      font-size: 26rpx;
      color: #ec4863;
    }
  }
}

//租车必读(取消规则)
.cancleRuleContent {
  padding-top: 20rpx;
  font-size: 24rpx;

  .cancleTitle {
    font-size: 28rpx;
    color: #333333;
  }
}

//协议
.agreementWrapper {
  margin: 20rpx;
  font-size: 26rpx;
  color: #333333;
}

// 底部
.bottomWrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 150rpx;
  width: 100%;
  background-color: $bg-white-color;
  box-shadow: 0px 0px 68px 0px #eff2f4;
  z-index: 9999;

  .totalPriceContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 36rpx;
    height: 150rpx;

    .title {
      font-size: 24rpx;
      color: #879094;
    }

    .price {
      margin-left: 10rpx;
      font-size: 34rpx;
      color: #ec4863;

      &::before {
        content: '¥';
        font-size: 24rpx;
      }
    }

    .priceDetail {
      margin-left: 30rpx;
      font-size: 24upx;
      color: #1989fa;
    }

    .confimBtn {
      width: 300rpx;
      height: 120rpx;
      line-height: 120rpx;
      text-align: center;
      color: #fff;
      font-size: 36rpx;
      background: #1989fa;
      border-radius: 24rpx;
    }
  }
}

.popWrapper {
  background-color: $bg-white-color;
  padding: 80upx 50upx 20upx;

  .addtionalPopItem {
    margin-top: 10upx;
    // box-shadow: 0 0 68u 0 rgba(69,69,69,0.13);
    display: flex;
    justify-content: space-between;
    height: 60upx;

    .title {
      font-size: 26upx;
      font-weight: bold;
      color: $text-color-33;
      width: 200upx;
    }

    .value {
      font-size: 26upx;
      color: $text-color-price;
    }
  }

  .addtionalConfimBtn {
    margin-top: 30upx;
    width: 100%;
    height: 90upx;
    line-height: 90upx;
    text-align: center;
    color: $text-color-ff;
    background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
    border-radius: 45upx;
  }
}

.couponAlertWrapper {
  background-color: $bg-white-color;
  max-height: 800upx;
  padding-top: 70upx;

  .couponTitle {
    font-size: 28upx;
    font-weight: bold;
    color: $text-color-33;
    margin-left: 30upx;
    margin-bottom: 20upx;
  }

  .unUseCoupon {
    background-color: #fff;
    box-shadow: 0px 0px 65rpx 0px #e9e9e9;
    border-radius: 20rpx;
    margin: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
  }
}

.costWrapper {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 150rpx;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 222;

  .costContent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $bg-white-color;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 50rpx 40rpx 10rpx;

    .titleBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50rpx;

      .title {
        font-size: 34rpx;
        font-weight: bold;
        color: #333333;
      }
    }

    .costItem {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .chargeProjectName {
        max-width: 400rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.protectionContent {
  margin-top: 32rpx;
  padding-bottom: 12rpx;
  .protectionItem {
    font-size: 28rpx;
    color: #333;
    padding: 0 15rpx;
    border-radius: 16rpx;
    .chargeProjectName {
      font-size: 30rpx;
      font-weight: bold;
      margin-right: 10rpx;
      max-width: 200rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .remark11 {
      color: #999;
      margin-top: 10rpx;
      overflow: hidden;
      -webkit-line-clamp: 4;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }
}

.calendarItem {
  color: #333;
  font-size: 22rpx;
  box-shadow: 0 4rpx 16rpx 0 rgba(1, 10, 18, 0.16);
  border-radius: 10rpx;
  padding: 16rpx;
  margin: 5rpx;
}
</style>